<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>学生成绩管理系统登录</title>
	<link rel="icon" type="image/png" href="/assets/img/学籍管理.svg">
	<link href="assets/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
	<link href="assets/css/signin.css" th:href="@{/assets/css/signin.css}" rel="stylesheet">
	<style>
		.custom-control-input {
			position: absolute;
			opacity: 0;
		}
		.custom-control-label::before {
			content: none; /* 禁用默认的选项圆点 */
		}
		.custom-control-label:hover,
		.custom-control-input:checked ~ .custom-control-label {
			cursor: pointer;
		}
		.custom-control-input:checked ~ .custom-control-label::after {
			position: absolute;
			top: calc(100% - 0px); /* 调整圆点相对于父元素的位置 */
			left: 18px;
			display: block;
			width: 80%; /* 使圆点宽度与父元素宽度相符 */
			height: 2px; /* 设置下划线的高度 */
			background-color: #007bff; /* 设置下划线的颜色 */
		}
	</style>
	<script type="text/javascript" src="assets/js/jquery-3.2.1.slim.min.js" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
	<!--	直接导入文件存在问题，需要连接到网页端	-->
	<script src="https://unpkg.com/@popperjs/core@2"></script>
	<script type="text/javascript" src="assets/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script>
	<script type="text/javascript" src="assets/js/feather.min.js" th:src="@{/assets/js/feather.min.js}"></script>
	<script>
		function login() {
			var role = $("input[name='role']:checked").val();
			if (role === 'student') {
				$("#loginForm").attr("action", "/stu/login").submit();
			} else if (role === 'teacher') {
				$("#loginForm").attr("action", "/tea/login").submit();
			} else if (role === 'admin') {
				$("#loginForm").attr("action", "/adm/login").submit();
			} else {
				alert("请选择账号身份！");
			}
		}
	</script>
	</head>
<body class="text-center">
<form id="loginForm" class="form-signin"  method="post">
	<img class="mb-4" th:src="@{/assets/img/用户.svg}" src="assets/img/用户.svg" alt="" width="72" height="72" style="margin-top: 20px">
	<h1 class="h3 mb-3 font-weight-normal" style="font-family: Arial, sans-serif;font-size: 24px;">系统账号登录</h1>

	<!--提示框-->
	<div class="alert alert-danger" role="alert" th:if="${msg!=null}">
		<div th:text="${msg}"></div>
	</div>
	<h2 class="h3 mb-3 font-weight-normal" style="font-family: Arial, sans-serif;font-size: 16px;color: dodgerblue;margin-top: 10px">[请在下方选择账号身份]</h2>

	<div class="row">
		<div class="col-md-4">
			<div class="form-group">
				<div class="custom-control custom-radio">
					<input type="radio" id="roleStudent" name="role" class="custom-control-input" value="student">
					<label class="custom-control-label" for="roleStudent">学生</label>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				<div class="custom-control custom-radio">
					<input type="radio" id="roleTeacher" name="role" class="custom-control-input" value="teacher">
					<label class="custom-control-label" for="roleTeacher">教师</label>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				<div class="custom-control custom-radio">
					<input type="radio" id="roleAdmin" name="role" class="custom-control-input" value="admin">
					<label class="custom-control-label" for="roleAdmin">管理员</label>
				</div>
			</div>
		</div>
	</div>

	<label for="inputUsername" class="sr-only" >用户名</label>
	<input type="text" id="inputUsername" name="username" class="form-control" placeholder="请输入用户名" required autofocus style="margin-top: 10px">

	<label for="inputPassword" class="sr-only">密码</label>
	<input type="password" id="inputPassword" name="password" class="form-control" placeholder="请输入密码" required>

	<button id="bt" class="btn btn-lg btn-primary btn-block" type="button" onclick="login()" style="background-color: #69b4f0; border-color: #80bdff; margin-top: 20px">登录</button>
	<p class="mt-5 mb-3 text-muted" style="margin-top: 5px">© Ctbu@yuaoxue 学生成绩管理系统</p>
</form>
</body>

</html>